{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预览 - {{ book.title }}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    <style>
        canvas {
            border: 1px solid black;
            width: 100%;
        }
    </style>
</head>
<body>
    <h2>预览 - {{ book.title }}</h2>
    <canvas id="pdf-canvas"></canvas>

    <script>
        const filePath = {{ file_path }};  // Django 会将路径传递到前端
        const canvas = document.getElementById("pdf-canvas");
        const ctx = canvas.getContext("2d");

        pdfjsLib.getDocument(filePath).promise.then(pdf => {
            pdf.getPage(4).then(page => {
                const viewport = page.getViewport({ scale: 1.5 });
                canvas.width = viewport.width;
                canvas.height = viewport.height;

                const renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        });
    </script>
</body>
</html>
